<template>
  <!-- SPU添加|编辑区 -->
  <div v-show="isShow == 1">
    <el-form ref="form" :model="spuInfo" label-width="80px">
      <el-form-item label="SPU名称">
        <el-input v-model="spuInfo.spuName" placeholder="SPU名称"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select v-model="spuInfo.tmId" placeholder="请选择">
          <el-option
            :label="item.tmName"
            :value="item.id"
            v-for="item in trademarkList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          placeholder="描述"
          rows="4"
          v-model="spuInfo.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <el-upload
          action="/dev-api/admin/product/fileUpload"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :on-preview="handleReshow"
          :on-remove="handleImg"
          :file-list="imageList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog
            :visible.sync="dialogVisible"
            width="30%">
            <img width="100%" :src="dialogImageUrl">
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select v-model="saleAttr" :placeholder="`还有${baseSaleAttr.length}个未选择`">
          <el-option
            v-for="item in baseSaleAttr"
            :key="item.id"
            :label="item.name"
            :value="`${item.id}:${item.name}`"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!saleAttr"
          @click="addSaleAttr"
          >添加销售属性</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table :data="spuInfo.spuSaleAttrList" border style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="width"
          >
          </el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="属性值名称列表" width="width">
            <template slot-scope="{ row }">
              <el-tag
                style="margin: 5px"
                :closable="true"
                v-for="it in row.spuSaleAttrValueList"
                :key="it.id"
                @close="closeTag(row,it)"
                >{{ it.saleAttrValueName }}</el-tag
              >
              <el-input style="width:70px" size="small" v-show="row.isInputAttrValue" v-model="row.spuAttrValue" @blur="inputBlur(row)"></el-input>
              <el-button style="margin-left:5px" v-show="!row.isInputAttrValue" size="small" @click="addSaleAttrValue(row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteAttr(row,$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSpuInfo">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SpuForm",
  props: ["isShow", "category3Id"],
  data() {
    return {
      spuInfo: {
        // 三级分类的id
        category3Id: 0,
        // spu描述信息
        description: "",
        // 品牌id
        tmId: '',
        // spu图片列表
        spuImageList: [],
        // spu名称
        spuName: "",
        // spu属性列表
        spuSaleAttrList: []
      },
      // 品牌列表
      trademarkList: [],
      // 选中的品牌
      // trademark: "",
      // 基础售卖属性
      baseSaleAttr: [],
      // 售卖属性下拉框选中的字段
      saleAttr: "",
      // 储存SPU图片,这个数组中的属性并不满足服务器所需的字段，在保存之前还需要整理数据
      imageList:[],
      // 展示SPU图片
      dialogImageUrl:'',
      // 控制SPU展示对话框是否出现
      dialogVisible:false
    }
  },
  methods: {
    // 添加模式初始化
    async initSpuFormAdd(){
      // 获取spu品牌
      const res1 = await this.$API.spu.reqGetTrademarkList();
      if (res1.code === 200) {
        this.trademarkList = res1.data;
      }
      // 获取基础售卖属性
      const res2 = await this.$API.spu.reqGetBaseSaleAttr();
      if (res2.code === 200) {
        // 将基础售卖属性保存
        this.baseSaleAttr = res2.data;
      }
    },
    // 编辑模式初始化
    async initSpuFormEdit(row) {
      // console.log('初始化',row);
      // 获取spu品牌
      const res1 = await this.$API.spu.reqGetTrademarkList();
      if (res1.code === 200) {
        this.trademarkList = res1.data;
      }
      // 获取基础售卖属性
      const res2 = await this.$API.spu.reqGetBaseSaleAttr();
      if (res2.code === 200) {
        // 将基础售卖属性保存
        this.baseSaleAttr = res2.data;
      }
      // 获取当前所选的spu信息
      const res3 = await this.$API.spu.reqGetSpuListById({spuId:row.id})
      if(res3.code === 200){
        this.spuInfo = res3.data
        // 剔除已经选中的售卖属性
        this.baseSaleAttr = this.baseSaleAttr.filter(it1=>{
          return this.spuInfo.spuSaleAttrList.every(it2=>{
            return it1.name != it2.saleAttrName
          })
        })
      }
      const res4 = await this.$API.spu.reqGetSpuImgListById({spuId:row.id})
      if(res4.code === 200){
        const currentImageList = res4.data
        // up-load组件要求照片墙每个图片对象的字段为 name和url，所以需要转换一下数据
        currentImageList.forEach(it=>{
          it.name = it.imgName
          it.url = it.imgUrl
        })
        this.imageList = currentImageList
      }
    },
    // 添加销售属性按钮
    addSaleAttr() {
      // 获得基本售卖属性的id与名称
      const [baseSaleAttrId,saleAttrName] = this.saleAttr.split(":")
      this.spuInfo.spuSaleAttrList.push({
        baseSaleAttrId,
        saleAttrName,
        // 对应属性值列表
        spuSaleAttrValueList: [
          // {
          //   baseSaleAttrId: 0,
          //   saleAttrValueName: "string",
          // },
        ],
      });
      // 清空上一次的选择
      this.saleAttr = ''
      // 重新展示未选择的售卖属性
      this.baseSaleAttr = this.baseSaleAttr.filter(it=>it.name!=saleAttrName)
    },
    // 添加售卖属性值按钮
    addSaleAttrValue(row) {
      // 这两个要动态添加到行内中，不同行的内容不应该一样，所以不能放在全局data中
      // 控制添加执行名按钮与输入属性值input框切换
      this.$set(row,'isInputAttrValue',true)
      // input输入框的spu属性值
      this.$set(row,'spuAttrValue','')
      
    },
    // 添加spu销售属性值输入框bulr
    inputBlur(row){
      // 判断输入是否合理
      // 是否为空
      if(row.spuAttrValue.trim()==''){
        row.spuAttrValue = ''
        this.$message.warning('输入值不合理')
        return;
      }
      // 是否重复
      const res = row.spuSaleAttrValueList.some(it=>it.saleAttrValueName == row.spuAttrValue)
      // 如果有重复
      if(res){
        this.$message.warning('输入值重复')
        return;
      }
      // 如果全部合理，添加
      row.spuSaleAttrValueList.push({
        baseSaleAttrId: row.baseSaleAttrId,
        // saleAttrName: row.saleAttrName,
        saleAttrValueName: row.spuAttrValue,
      });
      // 清除上一次的内容
      row.spuAttrValue = ''
      // 切换button与input
      // this.isInputAttrValue = !this.isInputAttrValue
      // 控制添加执行名按钮与输入属性值input框切换,重置为false，添加动态数据时，相同字段会被覆盖
      row.isInputAttrValue = false
    },
    // 销售属性tag标签删除
    closeTag(row,tag){
      row.spuSaleAttrValueList = row.spuSaleAttrValueList.filter(it=>{
        if(it.saleAttrValueName == tag.saleAttrValueName) return false
      })
    },
    // 删除某一个基础销售属性
    deleteAttr(row,$index){
      this.spuInfo.spuSaleAttrList.splice($index,1)
    },
    // 图片文件上传成功时
    handleAvatarSuccess(response, file, fileList) {
      // response表示上传结果
      // file表示当前上传的文件
      // fileList表示当前成功上传的图片数组
      // 将图片保存
      this.imageList = fileList
    },
    // 图片预览
    handleReshow(file){
      this.dialogImageUrl = file.url
      // 展示对话框
      this.dialogVisible = true
    },
    // 删除图片
    handleImg(file,fileList){
      // file代表将要删除的文件
      // fileList为删除此图片之后剩下的图片列表
      // 更新
      this.imageList = fileList
    },
    // 保存新增的spu信息
    async saveSpuInfo(){
      // 添加模式没有category3Id，需要在此处添加
      this.spuInfo.category3Id = this.category3Id
      // 将图片数据整理完整
      // 无论是编辑模式还是添加模式，对于照片墙列表服务器只需要两个字段（编辑模式服务器会返回图片id等数据，这里也删除了）
      this.spuInfo.spuImageList = this.imageList.map((item) => {
        return {
          imageName: item.name,
          // 对于新的图片url地址在response.data中
          imageUrl: (item.response && item.response.data) || item.url,
        };
      });
      // 此处的参数名为data，不能是params，后台决定，一般情况这两个对于post请求都可用
      const res = await this.$API.spu.reqSaveOrUpdateSpuInfo(this.spuInfo)
      if(res.code === 200){
        this.$message.success('添加spu成功')
        // 通知父组件切换为查看状态
        this.$emit('changeIsShow',{isShow:0})
        Object.assign(this._data, this.$options.data());
      }
    },
    // 取消按钮
    cancel(){
      this.$emit('changeIsShow',{isShow:0})
      Object.assign(this._data, this.$options.data());
      // console.log(this._data);
      // console.log(this.$options);
      // console.log(this.$options.data);
      // console.log(this.$options.data());
    }
  },
};
// 1.照片墙点击预览之后，自动再次去添加图片，怎么解决？因为dialog对话框写在了up-load的里面，应该在外面，位置错了
// 2. 为什么用下列代码能够清除上一次的spu中的数据
// Object.assign(this._data, this.$options.data());
// 因为this._data能够获取响应式数据（有数据）,this.$option.data()能够获取当前配置对象的data函数中的数据（空的）
// 3.修改imgList数据使之符合标准时,this.spuInfo.spuImageList为什么是null,而不是原来的[]?
  // 因为在编辑模式中,服务器返回的数据就是null,而不是[]

</script>
<style scoped lang="less">
</style>